<template>
  <div class="container">
    <div class="group">
      <el-form
        ref="form"
        class="form-wk"
        :model="form"
        :rules="rules"
        label-width="80px"
        @submit.native.prevent
      >
        <el-row>
          <el-col :span="10">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="描述" prop="description">
              <el-input v-model="form.description" type="textarea" rows="3" maxlength="255" />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align:right">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="group" style="flex:1">
      <div class="group-title"><span class="require-icon">*</span>表单设计</div>
      <fm-making-form
        ref="makingform"
        :basic-fields="['input', 'textarea','number','radio','checkbox','time','date','select']"
        :advance-fields="['cascader','fileupload']"
        :layout-fields="['grid']"
        :custom-fields="customFields"
        clearable
        style="height: calc(100% - 40px)"
      />
    </div>
  </div>
</template>

<script>
import { findById, updateForm, createForm } from '@/api/bpmn/formDesign.js'
// import { getFormComponent } from '@/views/basicConfig/serviceConfig/utils/setArr.js'
import { getFormComponent } from '@/views/basicConfig/serviceConfig/utils/setArr.js'
export default {
  beforeRouteLeave(to, from, next) {
    if (to.path.includes('/bpmn/formDesign/list')) {
      to.meta.keepAlive = true
    }
    next()
  },
  data() {
    return {
      form: {},
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: ['change', 'blur'] }
        ]
      },
      formTemplate: {},
      formAttr: '',
      customFields: [
        {
          name: '上传文件', // 字段名称
          el: 'FileUpload', // 组件注册的名称
          options: {
            /* 下面是设计器中自带的字段属性，可以根据自己组件的属性来进行配置 */
            defaultValue: {}, // 默认值
            customClass: '', // 自定义样式
            labelWidth: 100, // 标签宽度
            isLabelWidth: true, // 是否展示标签
            hidden: false, // 隐藏属性
            dataBind: true, // 数据绑定属性
            required: false, // 必填校验
            dataType: '', // 数据类型校验
            pattern: '', // 正则表达式校验
            validator: '' // 自定义校验
          }
        }
      ]
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.setFormData(this.$route.query.id)
    }
  },
  methods: {
    //  渲染数据
    setFormData(id) {
      findById(id).then(res => {
        this.form = {
          name: this.$route.query.type === 'copy' ? res.name + '-副本' : res.name,
          description: res.description
        }
        this.$refs.makingform.setJSON(JSON.parse(res.formTemplate))
      })
    },
    //  保存按钮
    async onSubmit() {
      this.formTemplate = this.$refs.makingform.getJSON()
      if (this.formTemplate.list.length == 0) {
        this.$message.error('请完善表单设计')
        return
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const fromList = getFormComponent(this.formTemplate.list)
          const formAttr = fromList.map(i => {
            if (i.type === 'date') {
              return { key: i.model, type: i.type, format: i.options.format, timestamp: i.options.timestamp }
            } else {
              return { key: i.model, type: i.type }
            }
          })
          if (this.$route.query.type && this.$route.query.type == 'edit') {
            updateForm(Object.assign({ id: this.$route.query.id, 'formTemplate': JSON.stringify(this.formTemplate), formAttr: JSON.stringify(formAttr) }, this.form)).then(res => {
              this.$message.success('保存成功')
              this.onCancel()
            })
          } else {
            createForm(Object.assign({ 'formTemplate': JSON.stringify(this.formTemplate), formAttr: JSON.stringify(formAttr) }, this.form)).then(res => {
              this.$message.success('保存成功')
              this.onCancel()
            })
          }
        } else {
          this.$message.error('请完善表单')
        }
      })
    },
    //  取消按钮
    onCancel() {
      this.$refs.makingform.clear()
      this.$router.go(-1)
    }

  }
}
</script>

<style lang="scss" scoped>
#app.dark-theme {
    .container{
    background:transparent !important;
  }
  .group-title{
    color:#fff !important;
  }
  .group{
    background: rgba(59,139,255,.4) !important;
  }
.el-container{
    background:transparent !important;
  }
  .fm-style .fm2-container{
    .config-tab{
      background:transparent !important;
    }
    .widget-cate,.config-tab{
      color:#fff;
    }
  }
  .fm-style .widget-form-container .widget-form-list{
    background:transparent !important;
  }
}
::v-deep .fm2-container .el-footer{
  display:none;
}
::v-deep aside{
  margin-bottom:0;
}

::v-deep .fm-style .widget-config-container .config-tab {
  width: 50%;
}
.container{
  height:100%;
  background:#f3f5f6;
  display:flex;
  flex-direction: column;
  .group {
    padding: 20px;
    background:#fff;
    border-radius:4px;
    margin-bottom:20px;
    &:nth-child(2){
      margin-bottom:0 !important;
    }
    .group-title{
      line-height:40px;
      .require-icon{
      color:#f56c6c;
      margin:0 10px;
    }
    }

  }
}
</style>
